<style lang="scss">
  @import "~@/styles/base";
  .page-empty {
    position: relative;
    height: 100vh;
    background-color: $bg-color;
    .icon {
      display: block;
      width: rpx(750);
      height: rpx(998);
      margin-bottom: rpx(50);
    }
    .tip {
      @include middle-center-x();
      top: rpx(560);
      font-size: rpx(40);
      color: $light-black;
    }
  }
</style>
<template>
  <div class="page-empty" v-if="!loading">
    <img class="icon" src="/static/img/device/none_bg.png">
    <div class="tip">暂无设备</div>
    <button class="btn" @getuserinfo="toAdd" open-type="getUserInfo"><img src="/static/img/common/add.png">添加设备</button>
  </div>
</template>

<script>
  import wx from 'utils/wx'

  export default {
    data() {
      return {
          loading: true
      }
    },
    components: {},
    methods: {
      toAdd(e){
        Store.commit(VUEX.USER.SET_WX_USER_INFO, e.mp.detail.userInfo);
        wx.navigateTo({
          url: '/sub-pages/bind/step1/main'
        })
      }
    },
    async onLoad() {
      if(!Store.getters.is_login){
        await Store.dispatch('login')
      }
      wx.showLoading();
      const list = await Store.dispatch('getDeviceList');
      wx.hideLoading();
      if(list.length){
        wx.switchTab({
          url: '/pages/light/main'
        })
        return false;
      }
      this.loading = false;
    },
  }
</script>
